<!--
@Description:SlidList
@Author:zqy
@Date:2023-04-13 16:37:07
@Last Modified by:zqy
@Last Modified time:2023-04-13 16:37:07
 -->
<template>
  <qmp-pull-refresh
    v-model="data.refreshing"
    :success-text="data.successText"
    :disabled="refreshDisabled"
    @refresh="onRefresh"
    class="ctm-list-page"
  >
    <template #loading> </template>
    <qmp-list
      ref="qmpList"
      v-model:loading="data.loading"
      v-model:error="data.error"
      :offset="offset"
      :immediate-check="immediateCheck"
      :finished="finished"
      :loading-text="data.loadingText"
      :error-text="data.errorText"
      :finished-text="finishedText"
      @load="onLoad"
    >
      <Slide @left="leftHandle" @right="rightHandle">
        <slot></slot>
      </Slide>
    </qmp-list>
  </qmp-pull-refresh>
</template>
<script lang="ts">
  import { ref, reactive, onActivated, onDeactivated, defineComponent } from 'vue'
  import Slide from '@/components/Slide'
  export default defineComponent({
    name: 'SlideList',
    components: { Slide },
    props: {
      load: {
        type: Function,
        default: undefined
      },
      refresh: {
        type: Function,
        default: undefined
      },
      finished: {
        type: Boolean,
        default: false
      },
      setPageSize: {
        type: Number,
        default: 20
      },
      setPage: {
        type: Number,
        default: 1
      },
      resetFun: {
        type: Function,
        default: () => {}
      },
      componentName: {
        type: String,
        default: ''
      },
      immediateCheck: {
        type: Boolean,
        default: true
      },
      offset: {
        type: Number,
        default: 300
      },
      finishedText: {
        type: String,
        default: '没有更多了'
      },
      defaultActive: {
        type: Boolean,
        default: true
      },
      refreshDisabled: {
        type: Boolean,
        default: false
      }
    },
    emits: ['update:finished', 'loaded', 'prev', 'next'],
    setup(props, { emit }) {
      const qmpList = ref()
      const data = reactive({
        refreshing: false,
        loading: false,
        error: false,
        loadingText: '加载中...',
        errorText: '加载错误！单击重试！',
        successText: '刷新成功',
        page: 1,
        pageSize: 10,
        isActive: props.defaultActive ? true : false
      })

      const promiseFun = async (fun: any, eventName: any, ...args: any) => {
        if (fun instanceof Function) {
          return await fun(...args)
        }
        emit(eventName, ...args)
      }
      const onLoad = () => {
        promiseFun(props.load, 'loaded', data.page, data.pageSize)
          .then((res) => {
            data.error = false
            data.page++
            return res
          })
          .catch((e) => {
            if (e === 'noError') {
              data.errorText = ''
            } else {
              data.errorText = '加载错误！单击重试！'
            }
            emit('update:finished', false)
            data.error = true
            return Promise.reject(e)
          })
          .finally(() => {
            data.loading = false
            data.refreshing = false
          })
      }
      // 重置分页数据
      function resetPageData(page: number, pageSize: number) {
        if (!data.isActive) return
        data.pageSize = pageSize || props.setPageSize
        data.page = page || props.setPage
        emit('update:finished', false)
        data.error = false
        data.loading = false
        props.resetFun()
        if (qmpList.value) {
          qmpList.value.check()
        }
      }

      const onRefresh = () => {
        emit('update:finished', true)
        resetPageData(1, props.setPageSize)
      }
      const leftHandle = () => {
        emit('prev')
      }
      const rightHandle = () => {
        emit('next')
      }

      onActivated(() => {
        // 缓存路由才生效
        data.isActive = true
      })
      onDeactivated(() => {
        // 缓存路由才生效
        data.isActive = false
      })
      resetPageData(1, props.setPageSize)

      return {
        data,
        onLoad,
        onRefresh,
        resetPageData,
        leftHandle,
        rightHandle,
        qmpList
      }
    }
  })
</script>

<style lang="less">
  .content-list {
    padding: 0 10px;
  }
</style>
